<template>
    <div class="_form-tab-box">
        <div class="_form-tab-item" :class="{ active: value == item.id }" v-for="item in tabList" :key="item.id"
            @click="$emit('input', item.id)">
            {{ item.name }}
        </div>
    </div>
</template>
<script>
export default {
    props: {
        //数据格式为 [{name:'',id:''}]
        tabList: {
            type: Array,
            default: () => [],
        },
        value: {
            type: String
        }
    },
    name: "FormTab"
}
</script>
<style scoped lang="scss">
._form-tab-box {
    display: flex;
    color: #FFF;
    align-items: center;

    ._form-tab-item {
        // transform: skew(30deg)
        line-height: 25px;
        padding: 0 13px;
        position: relative;
        z-index: 3;
        box-sizing: border-box;
        margin-left: 5px;
        font-size: 14px;
        color: #343434;
        cursor: pointer;

        &.active {
            color: #FFF;

            &::after {
                background: linear-gradient(163deg, #17F0F7 0%, #0EB6E5 100%);
            }
        }

        &::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            // background: linear-gradient(163deg, #17F0F7 0%, #0EB6E5 100%);
            // color: #B5B7C1;
            background-color: #B5B7C1;
            z-index: -1;
            border-radius: 4px 10px 0px 0px;
            transform: skewX(-25deg);
        }


    }

    ._form-tab-item+._form-tab-item {
        margin-left: 15px;
    }
}
</style>